<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .layer {
      background-color: rgba(0, 0, 0, .6);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .modal {
      position: absolute;
      top: 100px;
      left: 50%;
      width: 520px;
      margin-left: -260px;
      border-radius: 3px;
      background-color: #fff;
    }

    header {
      line-height: 50px;
      box-sizing: border-box;
      padding: 0 20px;
      font-size: 14px;
      overflow: hidden;
      border-bottom: 1px solid #eee;
    }

    header>.title {
      float: left;
      font-size: 18px;
    }

    header>.close {
      float: right;
      cursor: pointer;
    }

    main {
      box-sizing: border-box;
      padding: 20px;
      font-size: 14px;
    }

    footer {
      line-height: 50px;
      border-top: 1px solid #eee;
      height: 50px;
    }

    footer>span {
      float: right;
      height: 30px;
      line-height: 28px;
      margin-right: 20px;
      cursor: pointer;
      display: inline-block;
      padding: 0 20px;
      margin-top: 10px;
      border: 1px solid #ccc;
      border-radius: 2px;
    }

    footer>span.primary {
      border-color: blue;
      background-color: blue;
      color: white;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>

  <div id="app">
    <button @click="show=true">弹出model</button>
    <ml-modal title="编辑商品" @submit="onSubmit" @close="onClose" :show="show">
      <template>
        <div>
          <span>商品名称：</span>
          <input type="text" v-model="name">
        </div>
      </template>
    </ml-modal>
  </div>

  <script id="modal" type="x-template">
        <div class="layer" v-if='show'>
            <div class="modal">
                <header>
                    <span class='title' v-text='title'></span>
                    <span class='close' @click="$emit('close')">X</span>
                </header>
                <main>
                    <slot>
                        <div>我是主要内容区域</div>
                    </slot>
                </main>
                <footer>
                    <span class="primary" @click="$emit('submit')">确定</span>
                    <span  @click="$emit('close')">取消</span>
                </footer>
            </div>
        </div>
    </script>
  <script>
    Vue.component("ml-modal", {
      template: "#modal",
      props: {
        title: {
          type: String, default: "默认标题",
        },
        show: {
          type: Boolean, default: false,
        }

      },
    })

    let vm = new Vue({
      el: "#app",
      data() {
        return {
          name: "码路",
          show: false
        }
      },
      methods: {
        onClose() {
          this.show = false;
        },
        onSubmit() {
          // 获取新的数据，发送ajax请求
          console.log(this.name);
          this.name = "";
          this.show = false;
        }
      },
    });
  </script>

</body>

</html>